<template>
    <div class="app-container" v-loading="loading" element-loading-text="加载中...">
        <div class="app-container-inner">
            <h4 class="title_inf">资金详情</h4>
            <section class="left_right_sty">
                <div class="li_sty">
                    <p class="p_title"><span class="tip_span">商家名称</span></p>
                    <p class="acc_money">{{ detailData?.name }}</p>
                </div>
                <div class="li_sty">
                    <p class="p_title"><span class="tip_span">账户可下单金额(元)</span> <el-tooltip class="box-item"
                            effect="dark" content="=账号金额-占用金额" placement="right">
                            <el-icon color="#ccc" size="20">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip></p>
                    <p class="acc_money"><span class="tip_sty">￥{{ ((detailData?.money || 0)
        - (detailData?.freezeMoney || 0)).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span>
                    </p>
                </div>
                <div class="li_sty">
                    <p class="p_title"><span class="tip_span">账户金额(元)</span> <el-tooltip class="box-item" effect="dark"
                            content="=占用金额+可下单金额" placement="right">
                            <el-icon color="#ccc" size="20">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip></p>
                    <p class="acc_money"><span class="tip_sty">￥{{
        (detailData?.money || 0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span></p>
                </div>
            </section>
            <h4 class="title_inf">支付方式</h4>
            <el-form ref="formRef" style="max-width: 600px" :model="rechargeVo" label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="支付方式" prop="mode">
                    <el-radio-group v-model="rechargeVo.mode">
                        <el-radio :label="6">线下支付</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="mode" v-if="rechargeVo.mode == 1">
                    <div :class="`mode_sty ${isCheck == 1 ? 'active_mode' : ''}`" @click="onChecked(1)"><img
                            src="../../assets/image/vx.svg"><span class="tip">微信</span>
                        <p class="check_sty"><el-icon class="icon_sty"><Select /></el-icon></p>
                    </div>
                    <div :class="`mode_sty ${isCheck == 2 ? 'active_mode' : ''}`" @click="onChecked(2)"><img
                            src="../../assets/image/zfb.svg"><span class="tip">支付宝</span>
                        <p class="check_sty"><el-icon class="icon_sty"><Select /></el-icon></p>
                    </div>
                    <div :class="`mode_sty ${isCheck == 3 ? 'active_mode' : ''}`" @click="onChecked(3)"><img
                            src="../../assets/image/unionpay.svg"><span class="tip">银联</span>
                        <p class="check_sty"><el-icon class="icon_sty"><Select /></el-icon></p>
                    </div>
                </el-form-item>
                <el-form-item label="充值金额" prop="money">
                    <el-input v-model="rechargeVo.money" @input="rechargeVo.money = autoFixedDicimal(rechargeVo.money)"
                        @change="rechargeVo.money = Number(rechargeVo.money)" type="text" class="input_money"
                        autocomplete="off">
                        <template #prepend>￥</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <div style="margin-top: 20px;">
                        <el-button @click="resetForm()" class="w_btn">取消</el-button>
                        <el-button type="primary" class="w_btn" color="#007cff" @click="onSave">确认提交</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog v-model="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close
            title="提示" width="380" draggable class="save_dialog">
            <el-form label-width="auto" v-loading="submitLoading" element-loading-text="加载中..." style="padding:0 10px;">
                <el-form-item label="支付凭证">
                    <div class="upload_img">
                        <el-upload ref="upload" :auto-upload="false" list-type="picture-card" :on-preview="lookFile"
                            accept="image/*" drag action="#" :on-change="handleChange" v-model:file-list="fileList"
                            :limit="1" :on-exceed="onExceed">
                            <el-icon size="16">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input class="form-control" :rows="4" v-model="rechargeVo.remark" type="textarea" maxlength="100"
                        placeholder="备注" show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" color="#007cff" @click="submitForm()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 文件查看 -->
        <el-dialog title="查看" v-model="dialogContract" :draggable="true">
            <el-image :src="`${img}`" style="max-height: 90vh;"></el-image>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getFactoryBalance } from '../../api/finance'
import { saveRecharge } from '../../api/voucher'
import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
import _ from 'lodash'
import { orderAnnexUpload } from '@/api/upload'
import autoFixedDicimal from "@/utils/money";
import type { UploadFile, UploadProps, UploadRawFile } from 'element-plus'
const loading = ref(false)
const detailData = ref()
const rechargeVo = ref({
    "images": [],//支付凭证
    "mode": 6,//1-支付宝，2-微信，3-银联，4-对公支持，6-线下支付
    "money": 0,
    "remark": ""
})
const fileList = ref([])
const formRef = ref()
const dialogVisible = ref(false)
// 获取图片
const handleChange: UploadProps['onChange'] = (uploadFile: UploadFile, uploadFiles) => {
    fileList.value = uploadFiles
}
// 覆盖上一张
const upload = ref()
const onExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}
// 获取详情
const getFactoryBalanceData = async () => {
    loading.value = true
    await getFactoryBalance().then(res => {
        if (res) {
            if (!res.data.success) {
                ElMessage({
                    showClose: true,
                    message: res.data.message,
                    type: 'error',
                })
            } else {
                detailData.value = res.data.data.row
            }
        }
    })
    loading.value = false
}

const resetForm = () => {

}
// 查看图片
const img = ref('')
const dialogContract = ref(false)
const lookFile = (val) => {
    img.value = val.url || val
    dialogContract.value = true
}
// 确定
const submitLoading = ref(false)
const submitForm = _.debounce(async () => {

    // if (data.mode != 4) {
    //     data.mode = isCheck.value
    // }
    if (fileList.value.length > 0) {
        await orderAnnexUpload([fileList.value[0].raw]).then(res => {
            if (res.data.success) {
                rechargeVo.value.images = res.data.data.rows
            }
        })
    }
    await saveRecharge(rechargeVo.value).then(res => {
        if (res.data.success) {
            getFactoryBalanceData()
            fileList.value = []
            rechargeVo.value.images = []
            rechargeVo.value.remark = ''
            rechargeVo.value.money = 0
            dialogVisible.value = false
        }
        ElMessage({
            message: res.data.success ? '提交成功！' : res.data.message,
            type: res.data.success ? 'success' : 'error',
        })
    })
    submitLoading.value = false
}, 800)
// 确认提交
const onSave = () => {
    dialogVisible.value = true
}
// 支付方式
const isCheck = ref(1)
const onChecked = (n) => {
    isCheck.value = n
}
onMounted(() => {
    getFactoryBalanceData()
})
</script>

<style scoped lang="scss">
@import './index.scss'
</style>